<template>
  <div class="mainBox">
    <div class="cameraBox">
      <span class="title verticalTop">头像：</span>
      <div class="camera">
        <input type="file" id="uoload" class="fileInput" multiple accept="image/*" @change="uploadFile($event)">
        <img :src="imageUrl" alt="">
      </div>
      <span class="change">修改图片</span>
    </div>
    <div class="box">
      <span class="title">昵称：</span>
      <span class="infoSpan">{{nickName}}</span>&nbsp;&nbsp;
      <i class="el-icon-edit"></i>
    </div>
    <div class="box">
      <span class="title">性别：</span>
      <el-radio v-model="detail.sex" label="1">男</el-radio>
      <el-radio v-model="detail.sex" label="0">女</el-radio>
    </div>
    <div class="box">
      <span class="title">学历：</span>
      <el-radio v-model="detail.education" label="1">高中及以下</el-radio>
      <el-radio v-model="detail.education" label="2">专科</el-radio>
      <el-radio v-model="detail.education" label="3">本科</el-radio>
      <el-radio v-model="detail.education" label="4">研究生/硕士</el-radio>
      <el-radio v-model="detail.education" label="5">博士</el-radio>
    </div>
    <div class="box">
      <span class="title">学校：</span>
      <span class="infoSpan">{{school}}</span>&nbsp;&nbsp;
      <i class="el-icon-edit"></i>
    </div>
    <div class="box">
      <span class="title">专业：</span>
      <span class="infoSpan">{{major}}</span>&nbsp;&nbsp;
      <i class="el-icon-edit"></i>
    </div>
    <div class="box">
      <span class="title">所在地：</span>
      <el-select v-model="detail.provincevalue" placeholder="请选择省份">
        <el-option v-for="item in province" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="detail.cityvalue" placeholder="请选择城市">
        <el-option v-for="item in city" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <button class="save" @click="save">保存</button>

  </div>
</template>
<script>
import Service from "@/service/service";
export default {
  data() {
    return {
      imageUrl: require('../../../assets/image/camera.png'),//头像
      nickName:'',//昵称
      userSex:'',//性别
      school:'',
      major:'',
      detail: {
        sex: "",
        education: "",
        provincevalue: "",
        cityvalue: ""
      },
      province: [
        {
          value: "选项1",
          label: "广东"
        },
        {
          value: "选项2",
          label: "上海"
        },
        {
          value: "选项3",
          label: "北京"
        },
        {
          value: "选项4",
          label: "黑龙江"
        },
        {
          value: "选项5",
          label: "陕西"
        }
      ],
      city: [
        {
          value: "选项1",
          label: "北京"
        },
        {
          value: "选项2",
          label: "上海"
        },
        {
          value: "选项3",
          label: "深圳"
        },
        {
          value: "选项4",
          label: "广州"
        },
        {
          value: "选项5",
          label: "杭州"
        }
      ]
    };
  },
  methods: {
    save() {
      let data = {
        param: {
          detail: {
            sex: this.detail.sex,
            education: this.detail.education,
            provincevalue: this.detail.provincevalue,
            cityvalue: this.detail.cityvalue
          }
        }
      };
      Service.myAjax({
        data: data,
        url: baseUrl + "/user/saveMyData",
        method: "post"
      });
    },
    uploadFile (files) {
      // 上传图片
      console.log(files)
      let file = files.target.files[0];
      
    }
  },
  created() {
    let _this = this;
    let data = {
      extra: {},
      keyword: "",
      orderBy: "",
      pageNo: "1",
      pageSize: "5",
      param: {
        pageNo: "1",
        pageSize: "5",
        type: "post"
      },
      password: "string",
      userId: "19"
    };
    Service.myAjax(
      {
        method: "post",
        url: Service.baseUrl + "/user/myData",
        data: data
      },
      function(response) {
        debugger
        _this.imageUrl = response.data.data.detail.user.headPortrait;
        _this.nickName = response.data.data.detail.user.nickname;
        _this.detail.sex = response.data.data.detail.user.sex.toString();
        _this.detail.education = response.data.data.detail.userOtherInfo.educationName;
        _this.school = response.data.data.detail.userOtherInfo.schoolName;
        _this.major = response.data.data.detail.userOtherInfo.majorName;
        // if (response.data.data.detail.user.sex == 0) {
        //   _this.detail.sex = ''
        // } else {
          
        // }
        

      },
      function(error) {}
    );
  }
};
</script>
<style lang="scss" scoped>
.mainBox {
  padding: 50px 0 0 20px;
  border: 1px solid #dedede;
  .save {
    width: 60px;
    height: 30px;
    background: #fed226;
    font-size: 16px;
    margin: 30px 0 30px 300px;
  }
  .verticalTop {
    vertical-align: top;
  }
  .title {
    color: #333333;
    font-size: 16px;
    display: inline-block;
  }
  .box {
    margin-top: 20px;
    .el-icon-edit {
      font-size: 16px;
      color: #417cf2;
    }
    .infoSpan {
      font-size: 16px;
    }
  }
  .cameraBox {
    .change {
      font-size: 16px;
      vertical-align: baseline;
      color: #417cf2;
    }
    .camera {
      display: inline-block;
      width: 120px;
      height: 120px;
      position: relative;
      overflow: hidden;
      
      img{
        width: 120px;
        height: 120px
      }
      .fileInput {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        // visibility: hidden;
        // z-index: 9999;
        opacity: 0;
      }
    }
  }
}
</style>

